import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Radio } from 'antd';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment';
import st from '../Index.less';

@connect(({ problem }) => ({
  statistic: problem.handleStatistic,
}))
class HandleStatistic extends Component {
  constructor(props) {
    super(props);

    this.state = {
      type: 'municipal',
      option: {},
    };

    this.getOption = this.getOption.bind(this);
    this.handleTypeChange = this.handleTypeChange.bind(this);
  }

  componentWillMount() {
    this.queryData();
  }

  queryData() {
    const _self = this;
    const { dispatch } = _self.props;

    dispatch({
      type: 'problem/fetchHandleStatistic',
      callback: obj => {
        this.setState({
          option: _self.getOption('municipal'),
        });
      },
    });
  }

  getOption(type) {
    const { statistic } = this.props;
    const data = statistic[type];

    let option = {
      title: {
        text: '月数据：' + moment().format('YYYY年MM月'),
        left: '16px',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '4%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        itemWidth: 15,
        itemHeight: 15,
        data: ['已处理', '未处理'],
      },
      xAxis: {
        data: data.company,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#666',
          }
        },
        splitLine: {
          show: false,
        },
        axisLabel:{
          interval:0,  
          rotate:-15,
        }
      },
      yAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: '#666',
          }
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          name: '已处理',
          type: 'bar',
          stack: '数量',
          data: data.handle,
          itemStyle: {
            normal: { color: '#24a5e8' },
          },
        },
        {
          name: '未处理',
          type: 'bar',
          stack: '数量',
          data: data.nohandle,
          itemStyle: {
            normal: { color: '#32c8cc' },
          },
        },
      ],
    };

    return option;
  }

  handleTypeChange(e) {
    let type = e.target.value;
    this.setState({
      type: type,
      option: this.getOption(type),
    });
  }

  render() {
    return (
      <Card
      className={st.wtcz}
        title={<span className={st.cardTitle}>养护单位问题处理率</span>}
        extra={
          <Radio.Group value={this.state.type} onChange={this.handleTypeChange} buttonStyle="solid">
            <Radio.Button value="municipal">市政</Radio.Button>
            <Radio.Button value="landspace">园林</Radio.Button>
          </Radio.Group>
        }
      >
        <div className={st.wtczchart}>
          <ReactEcharts style={{ height: '100%' }} option={this.state.option} />
        </div>
      </Card>
    );
  }
}

export default HandleStatistic;
